<template>
  <common-list>
    <common-search slot="search" @search="handleQuery" @reset="resetQuery">
      <el-form
        @submit.native.prevent
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        @enter="handleQuery"
        label-width="55px"
      >
        <el-form-item label="申请人" prop="applicationName">
          <common-input
            v-model="queryParams.applicationName"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
      </el-form>
    </common-search>
    <common-table
      v-loading="loading"
      slot="content"
      :data="islist ? querylist : list"
    >
      <el-table-column
        label="申请人"
        align="left"
        prop="applicationName"
        show-overflow-tooltip
      />
      <el-table-column
        label="申请业务系统"
        align="left"
        prop="applicationBusiness"
        show-overflow-tooltip
      />
      <el-table-column
        label="目标业务系统"
        align="left"
        prop="targetBusiness"
        show-overflow-tooltip
      />

      <el-table-column
        label="申请时间"
        align="left"
        prop="applicationTime"
        show-overflow-tooltip
      />
      <el-table-column
        label="审批人"
        align="left"
        prop="approvalName"
        show-overflow-tooltip
      />
      <el-table-column label="审批结果" align="left" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.approvalOutcome === '1'"
            >通过</el-tag
          >
          <el-tag type="warning" v-if="scope.row.approvalOutcome === '0'"
            >待审批</el-tag
          >
          <el-tag type="danger" v-if="scope.row.approvalOutcome === '2'"
            >不通过</el-tag
          >
          <!-- <el-tag type="info" v-if="scope.row.approvalOutcome === 3">已撤销</el-tag> -->
        </template></el-table-column
      >
      <el-table-column label="操作" fixed="right" align="left" width="60px">
        <template slot-scope="scope">
          <el-button type="text" @click="handleApproval(scope.row)"
            >审批
          </el-button>
        </template></el-table-column
      >
    </common-table>
    <pagination
      slot="pagination"
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <common-edit-dialog
      width="900px"
      :title="title"
      :visible.sync="open"
      @cancel="cancel"
      @submit="submitForm"
      :buttonLoading="buttonLoading"
    >
      <common-group-title style="padding-left: 18px" title="审批总览" />
      <div class="overview">
        <div class="item" v-for="(item, index) in systemList">
          <span class="item-label">{{ item.businessName }}：</span>
          <span class="item-value">{{ item.total }}</span>
        </div>
      </div>

      <common-group-title style="padding-left: 18px" title="审批明细" />
      <div class="assetsDetailed">
        <common-table
          :data="approvalDetail"
          border
          v-loading="loading"
          height="200"
          class="import-data-table"
        >
          <el-table-column
            prop="targetBusiness"
            align="left"
            label="目标业务系统"
            width="200"
            show-overflow-tooltip
          />
          <el-table-column
            prop="targetUrl"
            align="left"
            label="目标接口名称"
            show-overflow-tooltip
          />
        </common-table>

        <pagination
          v-show="total1 > 0"
          :total="total1"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getDataById"
        />

        <el-form
          class="apply-form"
          ref="form"
          :model="form"
          label-width="90px"
          :rules="rules"
          @submit.native.prevent
        >
          <el-form-item label="审批结果：" prop="approvalOutcome">
            <template>
              <el-radio v-model="form.approvalOutcome" label="1">通过</el-radio>
              <el-radio v-model="form.approvalOutcome" label="2"
                >不通过</el-radio
              >
            </template>
          </el-form-item>
          <el-form-item label="审批理由：" prop="approvalReason">
            <common-input
              v-model="form.approvalReason"
              placeholder="请输入"
              type="textarea"
              :maxlength="256"
              clearable
            />
          </el-form-item>
        </el-form>
      </div>
    </common-edit-dialog>
  </common-list>
</template>

<script>
import BaseList from "@/mixins/BaseList";
export default {
  name: "ArkPortalIndex",
  mixins: [BaseList],
  data() {
    return {
      rules: {
        approvalOutcome: [
          { required: true, message: "请选择审批结果", trigger: "change" },
        ],
      },
      form: {
        approvalOutcome: "1",
        approvalReason: "",
      },
      approvalDetail: [],
      systemList: [],
      title: "敏感接口审批",
      open: false,
      buttonLoading: false,
      list: [],
      loading: false,
      queryParams: {
        applicationName: "",
        applicationBusiness: "",
        targetBusiness: "",
        approvalName: "",
      },
      total: 0,
      total1: 0,
      applicationName: "",
      islist: false,
      querylist: [],
    };
  },

  mounted() {
    this.getList();
  },

  methods: {
    handleQuery() {
      if (this.queryParams.applicationName !== "") {
        this.islist = true;
        this.querylist = this.list.filter((item, index, arr) => {
          if (
            item.applicationName.indexOf(this.queryParams.applicationName) >= 0
          ) {
            return item;
          }
        });
      } else {
        this.islist = false;
      }
    },
    resetQuery() {
      this.queryParams = this.$options.data().queryParams;
    },
    getList() {
      this.list = [
        {
          applicationName: "李雪", //申请人
          applicationBusiness: "运营责任管理系统", //申请业务系统
          targetBusiness: "业务系统", //目标业务系统
          targetUrl: "", //目标接口名称
          applicationTime: "2022-11-21 17:19:25", //申请时间
          approvalName: "白强", //审批人
          approvalOutcome: "1", //审批结果
        },
        {
          applicationName: "郝超仁", //申请人
          applicationBusiness: "IOM系统", //申请业务系统
          targetBusiness: "业务系统", //目标业务系统
          targetUrl: "", //目标接口名称
          applicationTime: "2022-11-20 18:40:51", //申请时间
          approvalName: "白强", //审批人
          approvalOutcome: "1", //审批结果
        },
        {
          applicationName: "黄晓泽", //申请人
          applicationBusiness: "集成订单系统", //申请业务系统
          targetBusiness: "业务系统", //目标业务系统
          targetUrl: "", //目标接口名称
          applicationTime: "2022-11-19 11:10:20", //申请时间
          approvalName: "白强", //审批人
          approvalOutcome: "1", //审批结果
        },
      ];
      this.total = this.list.length;
    },
    handleApproval(row) {
      this.applicationName = row.applicationName;
      this.open = true;
      this.systemList = [];
      this.systemList.push(
        {
          businessName: "申请人",
          total: row.applicationName,
        },
        {
          businessName: "申请业务系统",
          total: row.applicationBusiness,
        },
        {
          businessName: "申请时间",
          total: row.applicationTime,
        },
        {
          businessName: "审批人",
          total: row.approvalName,
        }
      );
      this.approvalDetail = this.list.filter(
        (item) => item.applicationName === row.applicationName
      );
      this.total1 = this.approvalDetail.length;
    },
    submitForm() {
      this.open = false;
      this.list.map((item) => {
        if (item.applicationName === this.applicationName) {
          item.approvalOutcome = this.form.approvalOutcome;
        }
      });
      this.$GlobalSuccessMessage("操作成功");
    },
    cancel() {
      this.open = false;
    },
    getDataById() {},
  },
};
</script>

<style lang="scss" scoped>
::v-deep .global-common-edit-dialog-body {
  padding-top: 0;
}
.overview {
  width: 100%;
  padding: 0 28px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .item {
    width: 50%;
    display: flex;
    align-items: center;

    .item-label {
      max-width: calc(100% - 60px);
      word-break: keep-all;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      box-sizing: border-box;
    }
    .item-value {
      word-break: keep-all;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      box-sizing: border-box;
    }
  }
}
.assetsDetailed {
  padding: 0 18px;
  .apply-form {
    margin-top: 18px;
  }
  .apply {
    margin-top: 18px;
    display: flex;
    align-items: flex-start;

    .label {
      width: 80px;
    }
  }
}

::v-deep .global-common-edit-dialog-body {
  max-height: 600px;
}
</style>
